<template>
	<view class="container">
		<view class="search-bar">
			<uni-icons style="margin-right: 20rpx;" type="left" size="20" @click="back"></uni-icons>
			<input type="text" placeholder="搜索目的地 / 景点" />
			<button @click="onSearch">搜索</button>
		</view>
		<view class="history">
			<view class="sou">
				<text class="title">历史搜索</text>
				<uni-icons class="trash" type="trash" size="20"></uni-icons>
			</view>
			<view class="tags">
				<block v-for="(item, index) in history" :key="index">
					<view class="tag"  @click="onSearch">{{ item }}</view>
				</block>
			</view>
		</view>
		<view class="recommendations">
			<text class="title">热门推荐</text>
			<view class="tags">
				<block v-for="(item, index) in recommendations" :key="index">
					<view class="tag"  @click="onSearch">{{ item }}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const history = reactive(['世界杯', '故宫博物馆', '周边游', '记录四', '记录五', '记录六', '记录七', '记录八记录八', '记录九', '记录十'])
	const recommendations = reactive(['北京万达文华酒店', '汤山温泉', '热门推荐三', '热门推荐', '热门推荐五'])
	const onSearch = () => {
		uni.navigateTo({
			url: "/pagesB/seacrch/search"
		})
	}
	console.log(history)
	console.log(recommendations)
	const back=()=>{
		uni.navigateBack({
			data:1
		})
	}
</script>

<style scoped>
	.trash {
		position: absolute;
		right: 0;
	}

	.container {
		padding: 10px;
	}

	.sou {
		display: flex;
		align-items: center;
	}

	.search-bar {
		display: flex;
		height: 50rpx;
		align-items: center;
		background-color: #ffffff;
		border-radius: 20px;
		padding: 5px 10px;
		margin-bottom: 10px;
	}

	input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 13px;
		padding: 10rpx;
		border: 2px solid #85A5F4;
		border-radius: 50rpx;
	}

	button {
		background-color: #4A9DEA;
		color: white;
		font-size: 13px;
		border: none;
		border-radius: 20px;
		height: 70rpx;
		/* 	padding: 10px 15px; */
		margin-left: 10px;
		cursor: pointer;
	}

	button:hover {
		background-color: #357ab8;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #f0f0f0;
		border-radius: 15px;
		padding: 5px 10px;
		margin: 15rpx;
		font-size: 14px;
	}
</style>